<template>
	<view>
		<u-navbar title="商务合作" titleStyle="color:#fff" leftIconColor="#fff" bgColor="transparent" :autoBack="true">
		</u-navbar>
		<view class="top">
			<view class="img">
				<image src="@/static/img/hezuo.png" mode=""></image>
			</view>

			<view class="info">
				<view class="title">
					请留下您的联系方式
				</view>
				<view class="li">
					<u-icon label="姓名" size="40" color="#ff8b38" name="account-fill"></u-icon>
					<input type="text" v-model.trim="from.real_name" class="ipt" placeholder="请填写您的姓名">
				</view>
				<view class="li">
					<view class="t-box" style="display: flex;align-items: center;">
						<image src="@/static/img/phone.png" mode=""></image>
						<u-text text="手机号" size="28rpx"></u-text>
					</view>
					<input type="text" v-model.number="from.mobile" class="ipt" placeholder="请填写您的手机号">
				</view>
				<view class="li">
					<view class="t-box" style="display: flex;align-items: center;">
						<image src="@/static/img/q11.png" mode=""></image>
						<u-text text="合作方式" size="28rpx"></u-text>
					</view>
					<input type="text" v-model="method_name" class="ipt" disabled @click="show=true" placeholder="请选择您的合作方式">
					<u-picker :show="show" keyName="name" @cancel="show=false" @close="show=false" @confirm="confirm"
						:columns="columns"></u-picker>
					<view class="icon">
						<u-icon name="arrow-down-fill" color="#fd8b0a" size="28"></u-icon>
					</view>
				</view>
				<view class="submit" @click="submit">
					确认并提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		UserApi
	} from '@/api';
	export default {
		data() {
			return {
				show: false,
				columns: [
					[]
				],
				p: 1,
				methods: [],
				from: {
					method_id: null,
					mobile: '',
					real_name: null
				},
				method_name: null
			};
		},
		onLoad() {
			this.getCooperateMethods()
		},
		methods: {
			async getCooperateMethods() {
				try {
					const res = await UserApi.getCooperateMethods({
						p: 1,
						size: 10
					})
					this.columns[0].push(...res.result.rows)

				} catch (e) {
					console.log(e);
				}
			},
			confirm(e) {
				this.from.method_id = e.value[0]['id']
				this.method_name = e.value[0]['name']
				this.show = false
			},
			async submit() {
				try {
					if (!this.from.mobile.length === 11) return this.$showToast('请输入正确手机号')
					if (!this.from.real_name) return this.$showToast('请输入姓名')
					if (!this.from.method_id) return this.$showToast('请选择合作方式')
					const res = await UserApi.cooperation(this.from)

					this.$showToast(res.msg)
					this.from = {
						method_id: null,
						mobile: '',
						real_name: null
					}
				} catch (e) {
					//TODO handle the exception
					this.$showToast(e)
				}
			}
		}


	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100vw;
		height: 700rpx;
		// background-color: #fe9446;
		position: relative;

		.info {
			width: 690rpx;
			height: 871rpx;
			border-radius: 20rpx;
			opacity: 1;
			background: #ffffff;
			box-shadow: 0 0 20rpx 0 #fb8b0736;
			position: absolute;
			left: 30rpx;
			top: 550rpx;
			box-sizing: border-box;
			padding: 87rpx 51rpx;

			.submit {
				width: 589rpx;
				height: 88rpx;
				border-radius: 50rpx;
				margin-top: 90rpx;
				opacity: 1;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				font-size: 30rpx;
				background: linear-gradient(173.2deg, #f8b280 0%, #ff8b38 100%);
			}

			.li {
				margin-top: 19rpx;
				position: relative;

				.icon {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
				}
			}

			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 400;
				margin-bottom: 56rpx;
			}

			.t-box {


				image {
					width: 23rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			.ipt {
				box-sizing: border-box;
				padding-left: 22rpx;
				margin-top: 10rpx;
				width: 589rpx;
				height: 74rpx;
				border-radius: 8rpx;
				opacity: 1;
				border: 1rpx solid #b5afaf;
				background: #ffffff;
				font-size: 26rpx;
				font-weight: 400;

				&::placeholder {
					font-size: 26rpx;
					font-weight: 400;
					color: #c2c2c2;
				}
			}
		}

		.img {
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 1311rpx;
				height: 711.91rpx
			}
		}
	}
</style>